import React, { useEffect } from 'react';

interface BackdropTypes {
  activeColor: string | undefined;
  trackIndex: string | number;
  isPlaying: boolean;
}

const Backdrop = ({ activeColor, trackIndex, isPlaying }: BackdropTypes) => {
  useEffect(() => {
    document.documentElement.style.setProperty('--active-color', activeColor || '#333');
  }, [trackIndex, activeColor]);
  return <div className={`color-backdrop ${isPlaying ? 'playing' : 'idle'}`} />;
};

export default Backdrop;
